<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      lang="en">
  <HEAD>
    <TITLE>Zuul Status</TITLE>

<script type="text/javascript"
	src="http://status.openstack.org/jquery.min.js"></script>
<script type="text/javascript"
	src="http://status.openstack.org/jquery-visibility.min.js"></script>
<script type="text/javascript"
	src="http://status.openstack.org/jquery-graphite.js"></script>
<script type="text/javascript"
	src="http://status.openstack.org/common.js"></script>
<script type="text/javascript"
	src="status.js"></script>

    <!-- Google Fonts -->
    <link href='http://fonts.googleapis.com/css?family=PT+Sans&amp;subset=latin' rel='stylesheet' type='text/css'/>

    <!-- Framework CSS -->
    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/blueprint/screen.css" type="text/css" media="screen, projection"/>
    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/blueprint/print.css" type="text/css" media="print"/>

    <!-- IE CSS -->
    <!--[if lt IE 8]><link rel="stylesheet" href="http://www.openstack.org/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

    <!-- OpenStack Specific CSS -->

    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/dropdown.css" type="text/css" media="screen, projection, print"/>

    <!-- Page Specific CSS -->
    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/home.css" type="text/css" media="screen, projection, print"/>

    <link rel="stylesheet" type="text/css" href="http://www.openstack.org/themes/openstack/css/main.css" />


<style type="text/css">
.container {
    width: 1024px;
}
label {
    font-weight: normal;
}
#pipeline-container {
    margin: 0 auto;
}
.line {
    background-image: url('line.png');
    background-repeat: repeat-y;
}
.pipeline {
    float: left;
    padding: 4px;
}
.pipeline > .header {
    background: #0000cc;
    color: white;
}
.pipeline > .subhead > .count {
    float: right;
    margin-right: 1em;
    color: #535353;
    font-size: 11pt;
}
.pipeline table {
    margin: 0 0 2px 0;
}
.pipeline table td {
    margin: 0;
    padding: 0 0 10px 0;
}
td.tree {
    width: 16px;
    height: 100%;
    vertical-align: top;
}
.pipeline table td.change-container {
    padding-left: 4px;
}
.change {
    border: 1px solid #95c7db;
    padding: 2px;
}
.change > .header {
    background: #E2ECEF;
    color: black;
    margin: -2px;
    padding: 4px;
}
.change > .header > .changeid {
    margin: 1em;
}
.change > .header > .time {
    float: right;
}
.change > .hover {
    background: #F3FDFF;
}
.jobs {
    padding-top: 4px;
}
.jobwrapper {
    display: table;
    width: 100%;
}
.job {
    display: block;
    line-height: 1.5;
}
.result {
    float: right;
}
.result_success {
    color: #007f00;
}

.queue_bad,
.result_failure {
    color: #cf2f19;
}
.queue_warn,
.result_unstable {
    color: #e39f00;
}
.queue_good {
    color: #888888;
}
#graph-container img {
    margin-left: 2px;
    margin-right: 2px;
}
#zuul_info_container {
    margin-top: 12px;
}
a:link {
    color: #204A87;
}
#message p{
    margin: 0;
}
.alertbox {
    border: 1px solid #e5574d;
    background: #ffaba5;
    color: black;
    padding: 1em;
    font-size: 12pt;
    margin: 0pt;
}
.change_progress {
    width: 5em;
    float: right;
    /* because other wise this floats up off the line */
    margin-top: 0.25em;
}
.filter_container {
    display: inline-block;
    position: relative;
    top: 1.5em;
    padding-left: .5em;
}
.filter_container input#filter {
    display: inline-block;
}
.filter_container sub {
    padding: .5em 0;
    display: block;
}
.filter_container sub a.save-filter {
    text-decoration: underline;
}
.filter_container .hidden {
    visibility: hidden;
}
.filter_container img.filter-saved {
    display: inline-block;
    position: relative;
    top: 3px;
}
.filter_container img.filter-saved.hidden {
    display: none;
}

.loading_message {
    text-align: center;
    font-size: 16pt;
}

/** Theming for the progress bars to get them consisten across browers:
      referenced from http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
*/

progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{
      /* Turns off styling - not usually needed, but good to know. */
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;

      /* gets rid of default border in Firefox and Opera. */
      border: none;

      /* Needs to be in here for Safari polyfill so background images work as expected. */
      background-size: auto;
}

/* Polyfill */
progress[role]:after {
      background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
      display: none;
}

/** Background color */
progress,                          /* Firefox  */
progress[role][aria-valuenow] {    /* Polyfill */
   background: #e6e6e6 !important; /* !important is needed by the polyfill */
}

/* Chrome */
progress::-webkit-progress-bar {
    background: #e6e6e6;
}

/** Foreground color */
/* IE10 */
progress {
    color: #6b81a2;
}

/* Firefox */
progress::-moz-progress-bar {
    background: #6b81a2;
}

/* Chrome */
progress::-webkit-progress-value {
    background: #6b81a2;
}

/* Polyfill */
progress[aria-valuenow]:before  {
    background: #6b81a2;
}

</style>

  </HEAD>

  <BODY>
    <script type="text/javascript">header('Zuul');</script>

    <div class="container">
      <h1> Zuul Status </h1>
      <p> Zuul is a pipeline oriented project gating and automation
	system.  Each of the sections below is a separate pipeline
	configured to automate some portion of the testing or
	operation of the OpenStack project.  For more information, please see
	<a href="http://docs.openstack.org/infra/zuul">the Zuul reference manual.</a>
      </p>

      <p>
      Queue lengths: <span id="trigger_event_queue_length"></span> events,
      <span id="result_event_queue_length"></span> results.
      &nbsp;&nbsp;&nbsp;&nbsp;
      <label for="filter">Filters:</label>
      <span class="filter_container">
        <input title="project(s) or review(s) separated by comma" type="text" id="filter" />
        <!--
        An embedded 'approved' image.
        From the famfamfam "Silk" icon set, Creative Commons Attribution 2.5.
        http://www.famfamfam.com/lab/icons/silk/
        -->
        <img class="filter-saved hidden" src="%2BV7SrIM%2BbSss8ySGdR4abQQv6lrui6VxsRonrGCS9VEjSQ9E7CtiqdOZ4UuTqnBHO1X7YXl6Daa4yGq7vWO1D40wVDtj4kWQbn94myPGkCDPdSesczE2sCZShwl8CzcwZ6NiUs6n2nYX99T1cnKqA2EKui6%2BTwphA5k4yqMayopU5mANV3lNQTBdCMVUA9VQh3GuDMHiVcLCS3J4jSLhCGmKCjBEx0xlshjXYhApfMZRP5CyYD%2BUkG08%2Bxt%2B4wLVQZA1tzxthm2tEfD3JxARH7QkbD1ZuozaggdZbxK5kAIsf5qGaKMTY2lAU/rH5HW3PLsEwUYy%2BYCcERmIjJpDcpzb6l7th9KtQ69fi09ePUej9l7cx2DJbD7UrG3r3afQHOyCo%2BV3QQzE35pvQvnAZukk5zL5qRL59jsKbPzdheXoBZc4saFhBS6AO7V4zqCpiawuptwQG%2BUAa7Ct3UT0hh9p9EnXT5Vh6t4C22QaUDh6HwnECOmcO7K%2B6kW49DKqS2DrEZCtfuI%2B9GrNHg4fMHVSO5kE7nAPVkAxKBxcOzsajpS4Yh4ohUPPWKTUh3PaQEptIOr6BiJjcZXCwktaAGfrRIpwblqOV3YKdhfXOIvBLeREWpnd8ynsaSJoyESFphwTtfjN6X1jRO2%2BFxWtCWksqBApeiFIR9K6fiTpPiigDoadqCEag5YUFKl6Yrciw0VOlhOivv/Ff8wtn0KzlebrUYwAAAABJRU5ErkJggg%3D%3D" />
        <sub>
          <a href="#" class="save-filter hidden">Save Filter</a>
        </sub>
      </span>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <label for="expandByDefault">Expand by default:</label>
      <span class="expand_by_default_container">
        <input type="checkbox" id="expandByDefault" onchange="toggle_expand_by_default(this)"/>
      </span>
      </p>
    </div>

    <div class="container">
      <div id="message"/>
    </div>

    <div id="pipeline-container">
        <p class="loading_message">Loading...</p>
    </div>

    <div class="container" id="graph-container">
      <h2> Job Stats </h2>

      <script type="text/javascript">
$.fn.graphite.defaults.url = "<%= @graphite_render_url %>";

$("#graph-container").append($(new Image()).addClass('graph').graphite({
    from: "-24hours",
    width: 334,
    height: 180,
    bgcolor: 'ffffff',
    fgcolor: '000000',
    areaMode: 'stacked',
    target: [
        "color(alias(sumSeries(stats.gauges.nodepool.nodes.building), 'Building'), 'ffbf52')",
        "color(alias(sumSeries(stats.gauges.nodepool.nodes.ready), 'Available'), '00c868')",
        "color(alias(sumSeries(stats.gauges.nodepool.nodes.used), 'In Use'), '6464ff')",
        "color(alias(sumSeries(stats.gauges.nodepool.nodes.delete), 'Deleting'), 'c864ff')",
    ],
    title: "Test Nodes"
}));

$("#graph-container").append($(new Image()).addClass('graph').graphite({
    from: "-24hours",
    width: 334,
    height: 180,
    bgcolor: 'ffffff',
    fgcolor: '000000',
    target: [
        "alias(smartSummarize(sumSeries(stats_counts.zuul.pipeline.*.all_jobs),'1h'),'All Jobs')",
    ],
    title: "Zuul Jobs Launched (per Hour)"
}));

$("#graph-container").append($(new Image()).addClass('graph').graphite({
    from: "-24hours",
    width: 334,
    height: 180,
    bgcolor: 'ffffff',
    fgcolor: '000000',
    target: [
        "alias(smartSummarize(stats_counts.gerrit.event.comment-added, '1h'), 'Comment added')",
        "alias(smartSummarize(stats_counts.gerrit.event.patchset-created, '1h'), 'Patchset created')",
        "alias(smartSummarize(stats_counts.gerrit.event.change-merged, '1h'), 'Change merged')",
    ],
    title: "Gerrit Events (per Hour)"
}));

$("#graph-container").append($(new Image()).addClass('graph').graphite({
    from: "-24hours",
    width: 334,
    height: 180,
    bgcolor: 'ffffff',
    fgcolor: '000000',
    target: [
        "color(alias(stats.gauges.zuul.geard.queue.running, 'Running'), 'blue')",
        "color(alias(stats.gauges.zuul.geard.queue.waiting, 'Waiting'), 'red')",
        "color(alias(stats.gauges.zuul.geard.queue.total, 'Total Jobs'), '888888')",
        "color(alias(stats.gauges.zuul.geard.workers, 'Workers'), 'green')",
    ],
    title: "Zuul Job Queue"
}));

$("#graph-container").append($(new Image()).addClass('graph').graphite({
    from: "-24hours",
    width: 334,
    height: 180,
    bgcolor: 'ffffff',
    fgcolor: '000000',
    target: [
        "color(alias(stats.gauges.logstash.geard.queue.running, 'Running'), 'blue')",
        "color(alias(stats.gauges.logstash.geard.queue.waiting, 'Waiting'), 'red')",
        "color(alias(stats.gauges.logstash.geard.queue.total, 'Total Jobs'), '888888')",
        "color(alias(stats.gauges.logstash.geard.workers, 'Workers'), 'green')",
    ],
    title: "Logstash Job Queue"
}));

      </script>
    </div>

    <div class="container" id="zuul_info_container">
        <h2>Zuul info</h2>
        <p>
            Zuul version:
            <span id="zuul-version"></span>
        </p>
        <p>
            Last reconfigured:
            <span id="last-reconfigured-span"></span>
        </p>
    </div>

    <script type="text/javascript">footer();</script>
  </BODY>
</html>
